<template>
  <n-card content-style="padding: 10px;" header-style="padding: 10px;" footer-style="padding: 10px">
    <template #header>
      信用卡信息
    </template>
    <template #header-extra>
      <n-button circle>
        <template #icon>
          <n-icon>
            <i class="fa fa-refresh" />
          </n-icon>
        </template>
      </n-button>
    </template>
    <n-grid cols="12" responsive="screen" item-responsive :y-gap="5" :x-gap="5" style="margin-bottom: 10px">
      <n-grid-item span="12 s:5 m:4">
        <n-input-group>
          <n-select placeholder="时间类型" v-model:value="search.timeType" :style="{ width: '200px' }" :options="[{
          label: '创建时间',
          value: 'createTime'
        },{
          label: '还款时间',
          value: 'repayTime'
        }]" clearable/>
          <n-date-picker v-model:value="search.rangeTime" type="daterange" clearable />
        </n-input-group>
      </n-grid-item>
      <n-grid-item span="12 s:3 m:3">
        <n-select v-model:value="search.searchStatus" :options="[{
          label:'已还款',
          value:1,
        },{
          label:'未还款',
          value:0,
        }]" clearable>

        </n-select>
      </n-grid-item>
      <n-grid-item span="12 s:5 m:5">
        <n-input-group>
          <n-select placeholder="搜索条目" v-model:value="search.searchType" :style="{ width: '200px' }" :options="[{
          label: '备注',
          value: 'remarks'
        },{
          label: '卡号',
          value: 'num'
        }]" clearable/>
          <n-input v-model:value="search.searchText" placeholder="请输入搜索内容"/>
          <n-button  ghost @click="loadCredits(0,10)">
            搜索
          </n-button>
        </n-input-group>
      </n-grid-item>
    </n-grid>
    <n-data-table
        :columns="columns"
        :data="creditData"
        min-height="250px"
        :bordered="false"
    />
    <n-pagination @update:page="page.onChange" @update:page-size="page.onUpdatePageSize" v-model:page="page.page" :item-count="page.itemCount" :page-count="page.pageCount" :page-slot="7" style="justify-content: center;margin-top: 5px"/>
  </n-card>
</template>

<script>
import {h} from "vue";
import {NButton,NSelect} from "naive-ui";

export default {
  name: "MaintainOfCreditCardTemplate",
  data(){
    return{
      search:{
        timeType:undefined,
        rangeTime:undefined,
        searchType:undefined,
        searchText:undefined,
        searchStatus:undefined
      },
      columns:[
        {
          type: "expand",
          renderExpand: (rowData) => {
            return rowData.creditRemarks
          }
        },
        {
          title: "ID",
          key: "creditId"
        },
        {
          title: "卡号",
          key: "creditNum",
        },
        {
          title: "银行Id",
          key: "bankId",
        },
        {
          title: "还款时间",
          key: "creditRepaytime",
          render:this.readerRepayTime
        },
        {
          title: "创建时间",
          key: "creditCreatetime",
          render:this.readerCreateTime
        },
        {
          title: "还款金额",
          key: "creditRepayamount",
        },
        {
          title:'还款状态',
          key:'creditStatus',
          render: this.readerCreditStatus
        },
        {
          title:'操作',
          key:'option',
          render: this.readerClickDelete

        }
      ],
      creditData:[],
      page:{
        page: 1,
        pageSize: 10,
        itemCount:0,
        onChange: (page) => {
          this.loadCredits(page,this.page.pageSize)
        },
        onUpdatePageSize: (pageSize) => {
          this.loadCredits(this.page.page,pageSize)
        }
      }
    }
  },
  methods:{
    loadCredits:async function (index,size){
      const search=this.search;
      await this.axios.post("/credit/selectCreditsBySelective",{
        timeType:search.timeType,
        startTime:!search.rangeTime?undefined:search.rangeTime[0],
        endTime:!search.rangeTime?undefined:search.rangeTime[1],
        searchType:search.searchType,
        searchText:search.searchText,
        status:search.searchStatus,
        pageIndex:index,
        pageSize:size
      }).then((res)=>{
        const data=res.data;
        this.creditData=data.data.data;
        this.page.page=data.data.pageIndex;
        this.page.itemCount=data.data.itemCount;
        this.page.pageSize=data.data.pageSize;
      })
    },
    readerRepayTime:function (row){
      const _this=this;
      return _this.$utils.dataUtil(row.creditRepaytime);
    },
    readerCreateTime:function (row){
      const _this=this;
      return _this.$utils.dataUtil(row.creditCreatetime);
    },
    readerClickDelete:function (row){
      const _this=this;
      return h(NButton, {
        size: "small",
        onClick:()=>{
          _this.axios.post("/credit/deleteCreditById",{
            creditId:row.creditId,
            creditNum:row.creditNum
          }).then((res)=>{
            const data=res.data;
            let msg;
            if (data.code>0) {
              msg=data.error;
            }else {
              msg=data.data;
            }
            if (_this.$utils.tipsOption(data.code, data.status, msg)) {
              return
            }
            _this.loadCredits(0,10)
          })
        }
      }, { default: () => "删除" });
    },
    readerCreditStatus:function (row){
      const _this=this;
      return h(NSelect,{
        value:row.creditStatus,
        options:[{
          label:'未还款',
          value:0
        },{
          label:'已还款',
          value:1
        }],
        "onUpdate:value":function (value){
          _this.axios.post("/credit/updateStatusByIdAndNum",{
            creditId:row.creditId,
            creditNum:row.creditNum,
            creditStatus:value
          }).then((res)=>{
            const data=res.data;
            let msg;
            if (data.code>0) {
              msg=data.error;
            }else {
              msg=data.data;
            }
            if (_this.$utils.tipsOption(data.code, data.status, msg)) {
              return
            }
            _this.loadCredits(0,10)
          })
        }
      })
    },

  },
  mounted() {
    this.loadCredits(0,10)
  }
}
</script>

<style scoped>

</style>